<template>
	<view>
		<view class="blood">
				<view  class="left_red win" :style="{width : pct + '%'}">
					{{left_num}}
				</view>
				<view  class="right_blue">
					{{right_num}}
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"blood",
		props: {
			left_num: { type: Number, default: 0 },
			right_num: { type: Number, default: 0 },
		},
		data() {
			return {
				pct: 50
			};
		},
		watch: {
			left_num(newVal) {
				this.left_num = newVal
				this.formatPct()
			},
			right_num(newVal) {
				this.right_num = newVal
				this.formatPct()
			}
		},
		mounted() {
			this.formatPct()
		},
		methods: {
			
			formatPct() {
				let allNum = this.left_num + this.right_num
				if (allNum == 0) {
					this.pct = 50
				} else {
					this.pct = this.left_num / allNum * 100
				}
				if (this.left_num < this.right_num) {
					const num_str = this.left_num + ""
					const min_pct = num_str.length * 2 + 4
					if (this.pct < min_pct) {
						this.pct = min_pct
					}
				} else {
					const num_str = this.right_num + ""
					const max_pct = 100 - (num_str.length * 2 + 4)
					if (this.pct > max_pct) {
						this.pct = max_pct
					}
				}
			},
		}
	}
</script>

<style scoped>

	.blood {
		width: 450px;
		height: 20px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
	}
	
	.left_red {
		position: absolute;
		width:50%;
		height:100%;
		background: linear-gradient(to right, #ff2440, #fd6728);
		border-radius: 10px 0 0 10px;
		left: 0;
		top: 0;
		border-right: 2px solid #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center; 
		justify-content: left; 
		padding-left: 10px;
		color: #fff;
		font-size: 14px;
	}
	
	.right_blue {
		position: absolute;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #48b7fc, #386ded);
		border-radius: 0 10px 10px 0;
		right: 0;
		top: 0;
		border-left: 2px solid #fff;
		box-sizing: border-box;
		display: flex;
		align-items: center; 
		justify-content: right;
		padding-right: 10px;
		color: #fff;
		font-size: 14px;
	}
	
	.win {
		z-index: 999;
		min-width: 6%;
		max-width: 94%;
	}
</style>